<!doctype html>
<html>
<head>
    <title>Websocket echo test</title>
</head>
<body>

<script type="text/javascript">
    var ws;
    var url;
    function connect() {
        url = document.getElementById("server_url").value;

        if ("WebSocket" in window) {
            ws = new WebSocket(url);
        } else if ("MozWebSocket" in window) {
            ws = new MozWebSocket(url);
        } else {
            document.getElementById("messages").innerHTML += "This Browser does not support WebSockets<br />";
            return;
        }
        ws.onopen = function(e) {
            document.getElementById("messages").innerHTML += "Client: A connection to "+ws.url+" has been opened.<br />";

            document.getElementById("server_url").disabled = true;
            document.getElementById("toggle_connect").innerHTML = "Disconnect";
            document.getElementById("send_msg").disabled = false;
        };

        ws.onerror = function(e) {
            document.getElementById("messages").innerHTML += "Client: An error occured, see console log for more details.<br />";
            console.log(e);
        };

        ws.onclose = function(e) {
            document.getElementById("messages").innerHTML += "Client: The connection to "+url+" was closed. ["+e.code+(e.reason != "" ? ","+e.reason : "")+"]<br />";
            cleanup_disconnect();
        };

        ws.onmessage = function(e) {
            document.getElementById("messages").innerHTML += "Server: "+e.data+"<br />";
        };
    }
    function disconnect() {
        ws.close();
        cleanup_disconnect();
    }
    function cleanup_disconnect() {
        document.getElementById("server_url").disabled = false;
        document.getElementById("toggle_connect").innerHTML = "Connect";
        document.getElementById("send_msg").disabled = true;
    }
    function toggle_connect() {
        if (document.getElementById("server_url").disabled === false) {
            connect();
        } else {
            disconnect();
        }
    }
    function send_msg() {
        ws.send(document.getElementById("ws_message").value);
    }

</script>

<style>
    body,html {
        margin: 0px;
        padding: 0px;
    }
    #controls {
        float:right;
        background-color: #999;
    }
</style>

<p>Copy from https://github.com/zaphoyd/websocketpp/blob/master/examples/telemetry_server/index.html</p>
<div id="controls">
    <div id="server">
        <input type="text" name="server_url" id="server_url" value="ws://localhost:8080/ws_echo" /><br />
        <input type="text" name="server_url" id="ws_message" value="Hello websocket" /><br />
        <button id="toggle_connect" onclick="toggle_connect();">Connect</button> <br />
        <button id="send_msg" disabled="true" onclick="send_msg();">Send</button>
    </div>
</div>
<div id="messages"></div>

</body>
</html>